<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-col :span="8">
        <el-form-item label="类型:">
          <span>{{ room.roomName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="桌号:">
          <span>{{ table.tablenumberId }}</span>
        </el-form-item>
      </el-col>


      <el-form-item label="开桌时间">
        <el-date-picker
          type="datetime"
          placeholder="选择日期"
          v-model="form.topenTable.openStartTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%;"
          @change="chooseDate"
          disabled="true"
        />
      </el-form-item>
      <el-form-item label="计费方式">
          <el-select v-model="form.topenTable.costType" placeholder="请选择计费方式" @change="selects" style="width: 100%">
            <el-option :label="item.costName" :value="item.id" v-for="item in costData.tcost"></el-option>
          </el-select>
      </el-form-item>
      <!--<el-form-item label="玩家选择:">
        <el-select v-model="form.tmember" multiple filterable  placeholder="请选择">
          <el-option
            v-for="item in costData.tmembers"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="备注信息">
        <el-input v-model="form.topenTable.remark" placeholder="请输入备注信息"></el-input>
      </el-form-item>

      <el-row type="flex" justify="space-between" class="bottom">
       <!-- <el-col :span="6">
          <span>临时维护</span>
        </el-col>-->
        <el-col :span="18" class="txt-right">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确认开桌</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import {openRoomTable} from "@/api/mahjong/cost";
  import {clickOpen} from "@/api/mahjong/room";

  export default {
    name: "Online",

    data() {
      return {
        form: {
          value2: [],
          tmember: [],
          topenTable: {
            costType: '',
            remark: '',

            roomId: this.room.id,
            tableId: this.table.id,
            peopleNumber: 4,
            openStartTime: this.getNowFormatDate()
          }


        },

        costData: '',
        nums: [],
        idx: 0
      }
    },
    props: {
      room: '',
      table: '',
      value2:'',
    },
    created() {
      this.getData()

    },

    methods: {
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
          + " " + date.getHours() + seperator2 + date.getMinutes()
          + seperator2 + date.getSeconds();
        return currentdate;
      },


      getData() {
        clickOpen(this.room.id).then(response => {
            this.costData = response.data
            //  this.form.tMember=response.data.tmembers
          }
        );
      },
      chooseDate(e) {
        this.form.topenTable.openStartTime = e
      },
      cancel() {
        this.$emit('update:close', false)

      },
      change(e) {
        console.log(e)
        this.nums.map(item => {
          this.form.tMember.push({id: item})

        })
        console.log(this.form.tMember)
        this.form.tMember = e
      },
      selects(e) {
        this.form.topenTable.costType = e
        console.log(e)
      },
      change(index) {

        if (this.idx === index || index === undefined) {
          return false;
        } else {
          this.idx = index;
        }
      },
      onSubmit() {
        this.nums.map(item => {
          this.form.tmember.push({id: item})
        })
        console.log(this.form.tmember)
        console.log(this.form)
        // this.form.tMember=JSON.stringify(this.form.tMember)
        openRoomTable(this.form).then(response => {
          if (response.code == 200) {
            this.$message({
              message: '开桌成功',
              type: 'success'

            });
            this.room='';
            this.table='';
            this.$emit('loadIndex')
            this.$emit('update:close', false)
          }
        });

      }
    }
  };
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .set {
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #CAAB62;
    width: 160px;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
  }

  .renshu span {
    background-color: #D3D0C6;
    margin-right: 10px;
    width: 30px;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    text-align: center;
    cursor: pointer;

    &.on {
      background: #CAAB62;
    }
  }

  .wanjia {
    position: relative;
    border: 1px solid #EBEEF5;
    border-radius: 2px;
    padding: 5px;

    .el-icon-arrow-down {
      position: absolute;
      top: 10px;
      right: 5px;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
    }

    span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 10px 5px 0;
      border: 1px solid #D5D5D5;
      background: linear-gradient(0deg, #D5D5D5, #F4F4F5);
      width: 110px;
      height: 40px;
      padding: 0 10px;
      line-height: 40px;
      font-size: 14px;
      color: #CAAB62;

      i {
        color: #C0C4CC;
        font-size: 20px;

      }
    }
  }

  .bottom {
    border-top: 1px solid #EBEEF5;
    align-items: center;
    padding-top: 15px;

    span {
      color: #CAAB62;
      font-size: 18px;
      text-decoration: underline;
      cursor: pointer;
    }

    .txt-right {
      text-align: right;
    }
  }</style>

